728x90 앱 개발 공부14 플러터 학습기 (8) - 드롭다운에서 옵션 추가하고 삭제하기 2024.02.18 - [앱 개발 공부] - 플러터 학습기(7)-옵션 추가할 수 있는 드롭다운 만들기 플러터 학습기(7)-옵션 추가할 수 있는 드롭다운 만들기 개인 프로젝트를 하면서 chatGPT와 5시간 정도 씨름하여 선택지 추가 및 삭제를 할 수 있는 드롭다운을 만들었다. 드롭다운 + 텍스트필드에서 옵션을 입력하면 드롭다운이 열리면서 입력한 옵션을 polissage.tistory.com 데이터 입력 폼을 만들기 시작하면서 옵션을 추가·삭제할 수 있는 드롭다운을 구현하는데 시간을 굉장히 많이 썼다. 기본 요구사항은 아래와 같았다. 1. 드롭다운 클릭했을때 옵션 추가하기 버튼 나오게 하기 2. 버튼 클릭하여 옵션 생성하기 3. 생성한 옵션 옆에 삭제 버튼이 나와서 클릭하면 삭제하기 여기까지는 비교적 쉽게.. 2024. 3. 10. 플러터 학습기(7)-옵션 추가할 수 있는 드롭다운 만들기 개인 프로젝트를 하면서 chatGPT와 5시간 정도 씨름하여 선택지 추가 및 삭제를 할 수 있는 드롭다운을 만들었다. 드롭다운 + 텍스트필드에서 옵션을 입력하면 드롭다운이 열리면서 입력한 옵션을 추가하는 버튼이 나오고, 그 버튼을 누르면 옵션 생성이 완료된다. 생성한 옵션을 선택한 후 선택 해제 버튼을 클릭하여 다시 새로운 옵션을 입력하여 추가할 수 있다. 드롭다운을 클릭해 설정한 다른 옵션을 선택하는 것도 가능하고, 삭제 버튼을 클릭하여 옵션을 삭제할 수도 있다. 이 UX가 최선인지는 아직 고민이 되는데, 원래는 추가하기 버튼을 항상 노출하고 다이얼로그에서 옵션을 추가하게 하려고 했다. 이것보다는 위가 더 나은 방식인 것 같은데, 새로 생성한 옵션이 바로 선택되지 않는 것과 옵션 선택 상태에서 선택 해.. 2024. 2. 18. 플러터 학습기 (6) - 바텀 내비게이션 바 커스텀하기, theme 설정하기 상태 관리 쪽 학습을 끝내고 예제를 좀더 학습하려고 하다가 빨리 앱을 만들고 싶은 마음에 앱 개발에 착수했다. 그간 적지 않은 시간이 흘렀고 틈틈히 디자인을 어느정도 해두어, 개발을 시작할 수는 있게 되었다. 험난한 길이 예상되긴 하지만 일단 지금 할 수 있는 것, 해야 할 것 같은 것부터 시작하기로 했다. 만들어야 할 페이지가 크게 3개이고, 로그인이나 설정 등은 일단 나중에 생각하기로 했다. 앱바가 있는 상태에서 플로팅 버튼으로 연결되는 화면을 chat gpt로 만들고 나니 바텀 내비게이션바까지 추가하면 기본적인 요소들이 구비되는 것 같아 바텀 내비게이션을 커스터마이징 해보기로 했다. 이와 함께 자주 사용하는 컬러와 폰트를 세팅해놓는 작업도 필요하다는 생각이 들어 테마 설정도 같이 시도해보기로 했다... 2024. 2. 10. 플러터 기본 학습 - 상태관리 (2) Provider State management state 관리의 의의 setState 메소드 setState를 거치는 함수를 통해 State 객체의 내부 상태를 변경하여 하위 위젯 트리에 영향을 미치도록 한다. 플러터에서 변경 알림은 콜백을 통해 위젯 계층 구조를 따라 위로 흐르고, 현재 상태는 아래로 화면을 그리는 Stateless 위젯까지 이동한다. setState를 호출하여 프레임워크에 이 객체의 내부 상태가 하위 위젯 UI에 영향을 줄 수 있도록 변경되었음을 알리며, 이에 따라 프레임워크는 이 State 객체에 대한 빌드를 수행한다. 플러터 공식문서: setState method 상태 변경을 위해 setState를 사용하면 아래와 같은 문제가 발생한다. 1. 비효율성: 한 위젯의 상태를 변경하기 위해 모든 하위.. 2024. 1. 20. 플러터 기본 학습 - 상태 관리 (1) state, Stateful widget 플러터에서는 상태가 변경되면 UI를 명령어로 직접 변경하지 않는다(예: widget.setText). 상태를 변경하면 이에 맞게 UI를 리빌드한다.(declarative) State 상태는 UI를 변경하도록 영향을 미치는 데이터를 가리키며, 일시적인 상태(Ephemeral)와 app 수준의 상태 2가지가 있다. 일시적 상태는 위젯 1개에서 StatefulWidget 내 setState 메소드로 간단하게 표현할 수 있다. 일시적 상태 PageView의 현재 페이지 복잡한 애니메이션의 현재 진행 상태 BottomNavigationBar에서 현재 선택된 탭 app state 앱 상태는 여러 곳에서 공유되거나 여러 세션에서 유지하려고 하는 상태를 가리킨다. 사용자 환경 설정 로그인 정보 소셜 네트워킹 앱의 알림.. 2024. 1. 12. 플러터 학습기 (5) - 핫 리로드, Element tree, Render tree 책에서 provider 쪽을 공부하다가 잘 모르는 기초 개념들이 발목을 잡는 기분이 들어 몇가지 기초를 공부하고 돌아왔다. 몇가지 예제를 실습하면서 터미널에서 flutter run을 하는 것보다 hot reload를 하는 것이 굉장히 편하다는 것을 알게 되었다. Hot reload 사용법 hot reload를 통해 코드 저장시 변경되는 내용을 에뮬레이터에서 바로 확인할 수 있다. cmd+shift+p > Launch emulator를 눌러 실행할 에뮬레이터를 선택한 다음, Run > start debugging(F5)를 선택하면 결과물을 확인 가능하다. 이후 변경사항이 생길시 저장만 하면 에뮬레이터에 해당 내용이 즉각 반영된다. 이 기능은 애플리케이션 전체를 다시 시작하지 않고 실행 중인 Dart 가상 .. 2024. 1. 7. Generics, Collections Generics과 Collections 1. Collections: 데이터를 모아 보여주는 자료 구조 • 대표적으로 List(array), Set, Map 등이 있다 2. Generics: collection이 가지고 있는 데이터의 타입을 지정. 코드의 안정성 및 재사용성을 위해 사용된다. Collections Lists 스퀘어 브라켓([ ]) 안에 리스트 항목을 콤마로 구분하여 넣어준다. var list = [1, 2, 3]; //목록을 만들때는 대괄호 안에 1. 유형 var number = new List(); // new List는 list 클래스의 생성자를 통해서 새로운 인스턴스를 생성하고, 이를 number라는 변수에 할당한 것. // 변수 number가 List 객체에 참조를 저장하고 있다고도.. 2024. 1. 6. 플러터 기본 학습 - extends vs mixin 플러터 책 3주차 막바지의 상태 관리와 provider 내용이 나오면서, 내용이 급격하게 어려워진 느낌이 든다. provider 다음으로 changenotifier 클래스에 대한 내용이 나왔는데 mixin 관련 내용에 대한 이해가 필요해서, 짚고 넘어가지 못한 extends에 대해 mixin과 비교하여 학습했다. extends extends는 한 클래스가 다른 클래스를 상속받는 것을 나타낸다. 상속을 통해 기존 클래스를 변형한 클래스를 생성할 수 있다. 상속을 받은 child class는 parent class(super class)의 모든 속성을 물려받으며, child class에 새로운 속성도 추가할 수 있다. class Model { String name; void runWay() { print(".. 2023. 12. 28. 플러터 학습기 (4) - final과 const, chat gpt로 코딩해보기 초보자도 프로처럼 만드는 플러터 앱 개발(링크) 3주 차를 완료했다. 3주 차 마지막에 상태 관리 부분과 Provider 관련한 내용이 나왔는데 어찌어찌 따라 할 수 있었던 앞부분과 달리 이해하기가 어렵다ㅠ 그래서 병행해서 보고 있는 코딩셰프 강좌를 다시 켰다. 순한맛을 보고 조금 따라 하다가 진도가 느린 것 같아서 책으로 다시 넘어왔는데, 상태관리 부분까지는 강의 몇십 개의 갭이 있다. 뭔가 기초를 잘 다지고 가지 않아서 나중에 고생할 것 같은 느낌이 든다. 어쨌든 예제를 좀 따라하면서 레이아웃에 대한 이해를 조금 더 넓혔고, 오늘 상태 관리에 대한 영상 이전 내용을 훑어보다가 기본적인 내용 중 아직 모르는 부분이 많다는 것을 깨닫고 나중에 알아보기로 했던 const에 대한 내용을 공부했다. 관련 강좌.. 2023. 12. 21. 플러터 기본 학습 - 위젯 플러터의 위젯은 리액트에서 영감을 얻은 모던 프레임워크를 사용하여 만들어졌다. 위젯은 플러터에서 UI를 구성하는 기본 단위로, 화면을 구성하는 모든 요소 및 요소들의 배치나 정렬, 패딩 등 레이아웃을 정의하는 요소도 위젯이다. 즉 플러터의 모든 것이 위젯이라고 할 수 있다. 위젯의 유형 Stateless 위젯 상태를 가지지 않는 위젯으로, 한 번 그려지면 변하지 않음. 주로 화면의 정적인 부분을 표현하는데 사용됨: 스크린상에 존재만 할 뿐 기능을 하지 않음 상호작용의 어떤 값도 저장하지 않으며 실시간 데이터를 저장하지 않음 모양을 변경시키는 밸류값도 가지지 않음 class MyTextWidget extends StatelessWidget { @override Widget build(BuildContext.. 2023. 12. 5. 이전 1 2 다음 728x90
